<script setup lang="ts">
import BlockBox from '../BlockBox.vue';
import { ref } from 'vue';
import { vNodata } from '../../packages/directives';
import ESNodata from '../../packages/components/nodata/src/index.vue';
const nodata = ref(true);

const opt = ref({
    nodata: true,
    nodataText: '空空如也',
    nodataType: 'n0',
    color: 'red'
})

const change = () => {
    opt.value = {
        nodata: !opt.value.nodata,
        nodataText: '空空如也',
        nodataType: 'n0',
        color: 'red'
    };
    nodata.value = !nodata.value
}
</script>

<template>
    <BlockBox text="v-nodata">
        <es-button status="info" @click="change()">切换</es-button>
        <div v-nodata="opt" style="width: 500px;height: 200px;">
        </div>
        <div v-nodata="nodata" style="width: 500px;height: 200px;">
        </div>
        <hr>
        <div style="width: 500px;height: 200px;overflow-y: scroll;">
            <ESNodata></ESNodata>
            <ESNodata type="n1"></ESNodata>
            <ESNodata type="n2"></ESNodata>
            <ESNodata type="n3"></ESNodata>
        </div>
    </BlockBox>
</template>

<style scoped></style>
